import React, { useState } from 'react'
import '../styles/JSXDemo.css'

function JSXDemo() {
  const [user, setUser] = useState({
    name: '张三',
    age: 25,
    hobbies: ['编程', '阅读', '运动']
  })
  
  const [isVisible, setIsVisible] = useState(true)
  const [items, setItems] = useState(['苹果', '香蕉', '橙子'])

  // JSX 中的条件渲染
  const renderConditionalContent = () => {
    if (user.age > 18) {
      return <p className="adult">成年人</p>
    } else {
      return <p className="minor">未成年人</p>
    }
  }

  // JSX 中的列表渲染
  const renderHobbies = () => {
    return user.hobbies.map((hobby, index) => (
      <li key={index} className="hobby-item">
        {hobby}
      </li>
    ))
  }

  // JSX 中的事件处理
  const handleClick = () => {
    alert('按钮被点击了！')
  }

  const handleInputChange = (e) => {
    setUser(prev => ({
      ...prev,
      name: e.target.value
    }))
  }

  return (
    <div className="jsx-demo">
      <h1>🎨 JSX 标签语言演示</h1>
      
      <div className="demo-sections">
        {/* 1. 基本 JSX 元素 */}
        <section className="demo-section">
          <h2>📝 基本 JSX 元素</h2>
          <div className="code-example">
            <h3>HTML 标签</h3>
            <p>这是一个段落元素</p>
            <strong>这是粗体文本</strong>
            <em>这是斜体文本</em>
            <code>这是代码文本</code>
          </div>
        </section>

        {/* 2. 属性使用 */}
        <section className="demo-section">
          <h2>🔧 JSX 属性</h2>
          <div className="code-example">
            <h3>HTML 属性转换为 camelCase</h3>
            <div className="attribute-demo">
              <input 
                type="text" 
                placeholder="请输入内容"
                className="demo-input"
                value={user.name}
                onChange={handleInputChange}
              />
              <button 
                className="demo-button"
                onClick={handleClick}
                disabled={false}
              >
                点击我
              </button>
            </div>
          </div>
        </section>

        {/* 3. JavaScript 表达式 */}
        <section className="demo-section">
          <h2>💻 JavaScript 表达式</h2>
          <div className="code-example">
            <h3>变量插值</h3>
            <p>姓名: {user.name}</p>
            <p>年龄: {user.age}</p>
            <p>计算: {2 + 2} = 4</p>
            <p>条件: {user.age >= 18 ? '成年' : '未成年'}</p>
          </div>
        </section>

        {/* 4. 条件渲染 */}
        <section className="demo-section">
          <h2>🔀 条件渲染</h2>
          <div className="code-example">
            <h3>使用 if-else</h3>
            {renderConditionalContent()}
            
            <h3>使用三元运算符</h3>
            {isVisible ? (
              <p className="visible">内容可见</p>
            ) : (
              <p className="hidden">内容隐藏</p>
            )}
            
            <h3>使用逻辑与运算符</h3>
            {isVisible && <p>条件为真时显示</p>}
            
            <button onClick={() => setIsVisible(!isVisible)}>
              {isVisible ? '隐藏' : '显示'}
            </button>
          </div>
        </section>

        {/* 5. 列表渲染 */}
        <section className="demo-section">
          <h2>📋 列表渲染</h2>
          <div className="code-example">
            <h3>爱好列表</h3>
            <ul className="hobbies-list">
              {renderHobbies()}
            </ul>
            
            <h3>水果列表</h3>
            <ul className="fruits-list">
              {items.map((item, index) => (
                <li key={index} className="fruit-item">
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </section>

        {/* 6. 样式处理 */}
        <section className="demo-section">
          <h2>🎨 样式处理</h2>
          <div className="code-example">
            <h3>内联样式</h3>
            <div 
              style={{
                backgroundColor: '#ff6b6b',
                color: 'white',
                padding: '1rem',
                borderRadius: '8px',
                margin: '1rem 0'
              }}
            >
              内联样式示例
            </div>
            
            <h3>CSS 类名</h3>
            <div className="styled-box">
              CSS 类名样式
            </div>
          </div>
        </section>

        {/* 7. 嵌套结构 */}
        <section className="demo-section">
          <h2>🏗️ 嵌套结构</h2>
          <div className="code-example">
            <div className="nested-structure">
              <header className="nested-header">
                <h3>页面标题</h3>
                <nav className="nested-nav">
                  <a href="#home">首页</a>
                  <a href="#about">关于</a>
                  <a href="#contact">联系</a>
                </nav>
              </header>
              
              <main className="nested-main">
                <article className="nested-article">
                  <h4>文章标题</h4>
                  <p>这是文章内容...</p>
                  <footer className="nested-footer">
                    <span>作者: {user.name}</span>
                    <time>发布时间: 2024-01-01</time>
                  </footer>
                </article>
              </main>
            </div>
          </div>
        </section>

        {/* 8. 表单处理 */}
        <section className="demo-section">
          <h2>📝 表单处理</h2>
          <div className="code-example">
            <form className="demo-form" onSubmit={(e) => e.preventDefault()}>
              <div className="form-group">
                <label htmlFor="username">用户名:</label>
                <input 
                  type="text" 
                  id="username"
                  name="username"
                  placeholder="请输入用户名"
                  className="form-input"
                />
              </div>
              
              <div className="form-group">
                <label htmlFor="email">邮箱:</label>
                <input 
                  type="email" 
                  id="email"
                  name="email"
                  placeholder="请输入邮箱"
                  className="form-input"
                />
              </div>
              
              <div className="form-group">
                <label htmlFor="message">消息:</label>
                <textarea 
                  id="message"
                  name="message"
                  placeholder="请输入消息"
                  className="form-textarea"
                  rows="4"
                />
              </div>
              
              <button type="submit" className="form-button">
                提交表单
              </button>
            </form>
          </div>
        </section>
      </div>
    </div>
  )
}

export default JSXDemo 